<!DOCTYPE html>
<html>

<head>
	<!--bootstrap -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title></title>

	<!-- Bootstrap -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
	<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
	<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
	<!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>

<body>
	<!-- 创建编辑器容器 -->
	<div class="container">
		<div class="row clearfix">
			<div id="div1" class="col-md-8 column">
				<p>第1个 demo（常规）</p>
			</div>
			<div class="col-md-2 column">
				占空
			</div>
			<div class="col-md-2 column">
				占空
			</div>
		</div>
		<div class="row clearfix">
			<div class="col-md-2 column" id="div2">
				<p>第2个 demo（常规）</p>
			</div>
			<div class="col-md-2 column" id="div3">
				<p>第3个 demo（常规）</p>
			</div>
			<div class="col-md-2 column" id="div4">
				<p>第4个 demo（常规）</p>
			</div>
			<div class="col-md-2 column" id="div5">
				<p>第5个 demo（常规）</p>
			</div>
			<div class="col-md-2 column" id="div6">
				<p>第6个 demo（常规）</p>
			</div>
			<div class="col-md-2 column" id="div7">
				<p>第7个 demo（常规）</p>
			</div>
		</div>
	</div>
	<!-- 引入 wangEditor.min.js -->
	<script type="text/javascript" src="//unpkg.com/wangeditor/dist/wangEditor.min.js"></script>
	<script type="text/javascript">
		const E = window.wangEditor
		// const editor1 = new E('#div1')
		// editor1.create()
		// const editor2 = new E('#div2')
		// editor2.config.menus = [
		// 	'bold',
		// 	'image',
		// ]
		// editor2.create()
		// const editor3 = new E('#div3')
		// editor3.create()
		// const editor4 = new E('#div4')
		// editor4.create()
		// const editor5 = new E('#div5')
		// editor5.create()
		// const editor6 = new E('#div6')
		// editor6.create()
		// const editor7 = new E('#div7')
		// editor7.create()
		function createEditor(editorDiv, menus) {
			const editor = new E(editorDiv)
			if (menus != 'all') editor.config.menus = menus // 判读在创建编辑器前是否需要全部的菜单功能，如果都需要就传入 all，否则，需要什么就传递什么
			editor.create()
		}
		const editor1 = createEditor('#div1', 'all')
		const editor2 = createEditor('#div2', ['bold', 'image'])
		const editor3 = createEditor('#div3', ['bold', 'image'])
		const editor4 = createEditor('#div4', ['bold', 'image'])
		const editor5 = createEditor('#div5', ['bold', 'image'])
		const editor6 = createEditor('#div6', ['bold', 'image'])
		const editor7 = createEditor('#div7', ['bold', 'image'])
		const editor8 = createEditor('#div8', ['bold', 'image'])
		//利用ajax post数据
		function ps() {

			var xmlhttp;
			if (window.XMLHttpRequest) {
				// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
				xmlhttp = new XMLHttpRequest();
			}
			else {
				// IE6, IE5 浏览器执行代码
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.onreadystatechange = function () {
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					editor1.txt.html('<p>用 JS fffffffff设置的内容</p>') // 重新设置编辑器内容
				}
				xmlhttp.open("POST", "/titletest", true);
				xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
				xmlhttp.send("fname=Henry&lname=Ford");
			}
		}
	</script>
	<!-- 提交数据 -->
	<button onclick="ps()">提交</button>

</body>

</html>